<?php

include "php/conn.php";

$users = mysql_query("SELECT username FROM members");

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Beer Ticks</title>
<style>
.error
{
color:#F03;	
}

</style>
<!-- CSS stylesheets -->
    <link type="text/css" href="css/master.css" rel="stylesheet"/>

<!--WEBFONTS-->
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>    
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'/>
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
var usernames = new Array();
$(document).ready(function() {
	//create an array of all the usernames to be to prevent duplicates on validation
	
	<?php while($row = mysql_fetch_array($users)) {?>
	usernames.push('<?php echo $row['username'];?>');
	<?php }?>
	
});
//this is called whenever the submit button is clicked
function validateForm(){
	
	//flag to return the validity of the form after validation occurs
	var validStatus = true;	
	
	//reset all potential error fields to normal
	$('.error').removeClass('error');
	
	//get form values for validation
	var firstName = $('#firstName').val();
	var lastName = $('#lastName').val();
	var email = $('#email').val();
	var user = $('#user').val();
	var password = $('#password').val();
	var confirmPassword = $('#confirmPassword').val();
	
	//check first name (more than 1 character)
	if (lessThan2Chars(firstName)  )  {
	$('#firstNameLabel').addClass('error');
	validStatus = false;		
	}
	if (lessThan2Chars(lastName)  )  {
	$('#lastNameLabel').addClass('error');
	validStatus = false;		
	}
	
	if (lessThan2Chars(user) || (existingUser(user)==true) )  {
		$('#userLabel').addClass('error');
		alert('Username not available. Please choose another.');
		validStatus = false;		
	}
	
	//check the email address
	if ( ! validateEmail (email) ){
		$("#emailLabel").addClass('error');	
	}
	
	//check confirm password (same as password)
	/*if (!(password==confirmPassword) || (confirmPassword == "") ){
		$("#confirmPasswordLabel").addClass("error");
		validStatus = false;	
	}*/
		
	return validStatus;
}	
		

function lessThan2Chars(string) {
	return (string.length < 2);	
}

function phoneCheck ( num ){
	var validString = '';
	for(var i=0; i<num.length;i++)
	{
		var char = num.charAt(i);
		if (! isNaN(char) ) {
			validString = validString + char;	
		}
	}
		/*404-555-1212
		i=0, char = 4, validString= 4
		i=1, char = 0, validString = 40
		i=2, char = 4, validString= 404
		i=3, char = -, validString = 404
		i=4, char = 5, validSting = 4045
		...
		i=11, char = 2, validString = 4045551212
		*/
		
		/*if (validSting.length >9)
		{return true;}
		else
		{return false;}
		*/
		return (validString.length>9);
}

	//check the email address to see if it is in the a valid format using a regular expression
	function validateEmail(elementValue){  
			var emailPattern = /^[a-zA-Z0-9.%+_-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/;  
			return emailPattern.test(elementValue);  
		}

	function existingUser(user){
		for(var i=0; i<usernames.length; i++){
			if(user == usernames[i])
			return true;	
		}
	}


</script>

</head>

<body>
<div id="registerWrapper">
    <img src="images/beertixlogo.png" alt="Beer Ticks" />
    
    <form id="register" method="post" action="submitUser.php" onsubmit="return validateForm()">
    
        <p><label id="firstNameLabel">First Name:</label><input class="register" type="text" name="firstName" id="firstName"/></p>
        
        <p><label id="lastNameLabel">Last Name:</label> <input type="text" name="lastName" id="lastName"/></p>
        
        <p><label id="emailLabel">Email:</label><input type="text" name="email" id="email" /></p>
        
        <p><label id="userLabel">Username:</label><input type="text" name="user" id="user"/></p>
        
        <p><label id="passwordLabel">Password:</label><input type="text" name="password" id="password"/></p>
        
        <p><label id="confirmPasswordLabel">Confirm Password:</label><input type="text" name="confirmPassword" id="confirmPassword"/></p>
        
        <p><label id="styleLabel">Fighting Style:</label><input type="text" name="style" id="style"/></p>
        
        <p><label id="homeLabel">Hometown:</label><input type="text" name="home" id="home"/></p>
        
        <input type="submit" src="images/btn_submit.png" id="submit" name="submit"/>
    
    </form>
</div>
</body>
</html>
